{% load static %}
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>首页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="{% static 'admin/css/pearCommon.css' %}" rel="stylesheet" />
	<link rel="stylesheet" href="{% static 'component/layui/css/layui.css' %}" media="all">
	<link href="{% static 'assets/console1.css' %}" rel="stylesheet" />
</head>

<body class="pear-container">
	<div>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-space10 layui-col-md9">
				<div class="layui-col-xs6 layui-col-md4">
					<div class="layui-card top-panel">
						<div class="layui-card-header">当前总库存</div>
						<div class="layui-card-body">
							<div class="layui-col-xs8 layui-col-md8 top-panel-number">
								<b id="supply_count"></b>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md4">
					<div class="layui-card top-panel">
						<div class="layui-card-header">累计入库</div>
						<div class="layui-card-body">
							<div class="layui-col-xs8 layui-col-md8 top-panel-number">
								<b id="all_in_count"></b>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md4">
					<div class="layui-card top-panel">
						<div class="layui-card-header">累计出库</div>
						<div class="layui-card-body">
							<div class="layui-col-xs8 layui-col-md8 top-panel-number">
								<b id="all_out_count"></b>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md6">
					<div class="layui-card top-panel">
						<div class="layui-card-header">今日入库</div>
						<div class="layui-card-body">
							<div class="layui-col-xs8 layui-col-md8 top-panel-number">
								<b id="today_in"></b>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md6">
					<div class="layui-card top-panel">
						<div class="layui-card-header">今日出库</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									<b id="today_out"></b>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">版本信息</div>
					<div class="layui-card-body">
						<table class="layui-table">
							<thead>
								<tr>
									<th>项目名称</th>
									<th>仓库后台管理</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>开源作者</td>
									<td>Mason</td>
								</tr>
								<tr>
									<td>当前版本</td>
									<td>1.0.0 Version</td>
								</tr>
								<tr>
									<td>开源协议</td>
									<td>Apache License</td>
								</tr>
								<tr>
									<td>开发周期</td>
									<td>2020 年 7 月 15 日</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<div id="echarts-1" style="background-color:#ffffff;min-height:400px;padding: 10px">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<div id="echarts-2" style="background-color:#ffffff;min-height:400px;padding: 10px">
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<!--</div>-->
	<script src="{% static 'component/layui/layui.js' %}" charset="utf-8"></script>
	<script>
		layui.use(['layer', 'echarts', 'element'], function () {
			var $ = layui.jquery,
				layer = layui.layer,
				element = layui.element,
				echarts = layui.echarts;

			var echarts1 = echarts.init(document.getElementById('echarts-1'), 'walden');
			var echarts2 = echarts.init(document.getElementById('echarts-2'), 'walden');

			var option = {
				title: {
					text: "本月每日出入库统计"
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [],
					axisLine: {
						lineStyle: {
							color: "#799"
						}
					}
				},
				yAxis: [{
					type: 'value',
					splitNumber: 4,
					splitLine: {
						lineStyle: {
							type: 'dashed',
							color: '#DDD'
						}
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: "#333"
						},
					},
					nameTextStyle: {
						color: "#999"
					},
					splitArea: {
						show: false
					}
				}],
				legend: {
					data: ["入库","出库",]
				},
				series: [{
					name: '入库',
					type: 'line',
					data: []
				},
				{
					name: '出库',
					type: 'line',
					data: []
				},]
			};
			echarts1.setOption(option);
			echarts2.setOption(option);

			// ajax 请求获取数据
			$.ajax({
				url: "{% url 'supply:in_out_statistics' %}",
				type: 'get',
				success: function (result) {
					if (result.status == 1) {
						let statistics = result.data.statistics
						let cur_data = result.data.cur_data
						let last_data = result.data.last_data

						$("#supply_count").text(statistics.supply_count)
						$("#all_in_count").text(statistics.all_in_count)
						$("#all_out_count").text(statistics.all_out_count)
						$("#today_in").text(statistics.today_in)
						$("#today_out").text(statistics.today_out)

						echarts1.setOption({
							xAxis: {
								type : 'category',
								data: cur_data.dates,
							},
							series:[{
								name: "入库",
								data: cur_data.supply_in,
							},{
								name: "出库",
								data: cur_data.supply_out,
							}]
						})
						echarts2.setOption({
							title: {
								text: "上月每日出入库统计"
							},
							xAxis: {
								type : 'category',
								data: last_data.dates,
							},
							series:[{
								name: "入库",
								data: last_data.supply_in,
							},{
								name: "出库",
								data: last_data.supply_out,
							}]
						})
					} else {
						layer.msg(result.msg, { icon: 2, time: 1000 });
					}
				}
			})

			window.onresize = function () {
				echarts1.resize();
				echarts2.resize();
			}

		});
	</script>
</body>

</html>